<template>
  <!-- 咨询分类设置 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <!-- <el-col :span="2">咨询分类</el-col> -->
        <!-- <el-col :span="6"> -->
        <!-- 只有一个医院时,不显示 -->
        <!-- <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <!-- </el-col> -->
        <el-col :span="24" align="right" class="addBtnStyle">
          <el-button @click="addClass(true,1)">+ 增加分类</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="no"
          label="编号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="deptName"
          label="归属部门"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="status"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="addClass(true,2,row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteOne(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog ref="resetClose" :visible="visibles" class="single-column" :title="title" :reveal="reveal" @close="addClass(false)" @confirm="balanceSubmit">
      <AddClass ref="addClassRef" :consult-row="consultRow" :number="number" :visibles="visibles" @success="visibles=false,fetchData()" />
    </Dialog>
  </div>
</template>

<script>
import AddClass from './addClassification.vue';
import Dialog from '@/components/Dialog';
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Dialog,
    AddClass,
  },
  data() {
    return {
      title: '增加咨询分类',
      reveal: true,
      loading: false,
      visibles: false,
      number: 1,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      tableData: [],
      options: [{
        value: '选项1',
        label: '黄金糕',
      }],
      value: '',
      consultRow: '',
      tableColor,
      innerHeight: null,
    };
  },
  mounted() {
    this.fetchData();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    handlePaginationChange(pagination) { // 分页
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.fetchData();
    },
    addClass(bool, number, row) { // 增加分类
      this.visibles = bool;
      this.number = number;
      if (this.number === 1) {
        this.title = '增加咨询分类';
      } else {
        this.title = '编辑咨询分类';
      }
      row ? this.consultRow = JSON.parse(JSON.stringify(row)) : this.consultRow = 1;
    },
    fetchData() { // 获取设置咨询分类分页数据
      this.loading = true;
      this.$api['seting/consulting/consultPage'](this.queryParams).then(res => {
        if (res.code !== 200) return this.$message.error("查询咨询分类数据失败");
        this.tableData = res.data.result;
        this.total = res.data.total;
        // this.$message.success('查询咨询分类数据成功');
        this.loading = false;
      });
    },
    async deleteOne(id) { // 删除单个咨询分类数据
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      } else {
        this.loading = true;
        this.$api['seting/consulting/deleteConsult']({ id }).then(res => {
          if (res.code !== 200) return this.$message.error("删除失败");
          this.loading = false;
          this.fetchData();
          return this.$message.success('删除成功');
        });
      }
    },
    balanceSubmit() {
      this.$refs.addClassRef.submitForm('ruleForm');
    },
  },
};
</script>
<style lang="scss" scoped>
// .el-row{
//   margin: 20px 0;
// }
</style>
